<template>
  <div style="width: 1040px;margin: 0 auto">
    <div style="width: 316px;height: 54px;border: 1px solid #e5e5e5;margin: 0 auto;margin-top: 20px">
      <div class="block">
        <el-date-picker
            v-model="value1"
            type="daterange"
            :range-separator="nights + '晚'"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :size="size"
            value-format="YYYY-MM-DD"
            style="width: 316px;
            height: 54px"
        />
      </div>
    </div>
    <div style="width: 1040px;height:716px;margin-top: 20px;margin: 0 auto">
      <div style="height: 64px;width: 100%;">
        <div style="float: left;">
          <h1>{{PubDetail.address}}</h1>
          <p>{{PubDetail.detailedAddress}}</p>
        </div>
        <el-button type="warning" style="float: right;font-size: 20px;margin-right: 20px;margin-top: 10px" :icon="Star" color="#e2e2e2" circle v-show='PubDetail.collectionCount==0' @click="addect(PubDetail.id)"></el-button>
        <el-button type="warning" style="border:none; color:orange;font-size: 20px;float: right;margin-right: 20px;margin-top: 10px" :icon="StarFilled" color="#e2e2e2" circle  v-show="PubDetail.collectionCount!=0" @click="deleteCollection"></el-button>
      </div>

<!--      图片部分-->
      <div style="width: 1040px;height: 460px;border: 1px solid #e5e5e5;display: flex">
        <div style="width: 50%;height:100%;">
          <img :src="imgList[0]" alt="" width="520px;" height="460px">
        </div>
        <div style="width: 50%;height:100%;display:inline-block;">
          <img :src="imgList[1]" alt="" width="254;" height="227" style="margin-right: 7px;margin-left: 5px">
          <img :src="imgList[2]" alt="" width="254;" height="227">
          <img :src="imgList[3]" alt="" width="254;" height="227" style="margin-right: 7px;margin-left: 5px">
          <img :src="imgList[4]" alt="" width="254;" height="227">
        </div>
      </div>
<!--      图片下方-->
      <div style="width: 1040px;height:98px;border: 1px solid #e5e5e5;margin-top: 20px">

<!--        抽屉-->
        <div style="margin-bottom: 20px">
          <h2 style="display: inline-block;margin-left: 30px;margin-top: 10px">酒店设施</h2>
          <span style="float: right;margin-right: 20px;margin-top: 20px">
            <el-button text @click="table = true">查看全部</el-button>
            <el-drawer
                v-model="table"
                direction="rtl"
                size="50%"
            >
              <el-tabs
                  v-model="activeName"
                  type="card"
                  class="demo-tabs"
                  @tab-click="handleClick"
                  style="padding: 30px"
              >
                <el-tab-pane label="点评" name="first">
                  <dianping></dianping>
                </el-tab-pane>
                <el-tab-pane label="政策" name="second">
                  <zhengce></zhengce>
                </el-tab-pane>
                <el-tab-pane label="设施" name="third">
                  <sheshi></sheshi>
                </el-tab-pane>
              </el-tabs>
            </el-drawer>
          </span>
        </div>
        <!--        酒店设施-->
        <div class="jdss">
          <span>酒店行李</span>
          <span>24小时前台</span>
          <span>餐厅</span>
          <span>健身房</span>
          <span>儿童拖鞋</span>
          <span>洗衣房</span>
        </div>
      </div>
    </div>

<!--    订房间-->
    <div style="width: 1042px;margin: 0 auto">
      <h1>房间</h1>
      <div>
        <div v-for="(roomType, index) in roomTypes" :key="index" style="width: 1042px;border: 1px solid #e5e5e5;margin-top: 20px">
          <div style="border-right: 1px solid #e5e5e5;width: 142px;display: inline-block;float:left;padding-left: 10px;padding-right: 10px">
            <div style="margin-top: 7px">
              <img :src="roomType.path" alt="" width="142px" height="112px">
            </div>
          </div>
          <div style="width: 847px;display: inline-block;padding: 10px">
            <div class="top"
               style="
                width: 847px;
                height: 105px;
                display: flex;
                justify-content: space-between;
                align-items: center;">
              <div style="display: inline-block">
                <p style="margin-bottom: 10px;margin-top: 10px">
              <span :style="{ color: roomType.breakfast==1 ? '#00BF6A' : 'inherit' }">
                {{ roomType.breakfast==1 ? '含早餐' : '无早餐' }}
              </span>
                  今天18点之前免费取消
                </p>
                <p>赠送里程</p>


              </div>
              <div>
                <h3>{{ roomType.roomName }}</h3>
                <p>{{ roomType.size }} m²</p>
                <p>可住{{ roomType.count }}人</p>
              </div>
              <div style="display: inline-block;float: right">
                <h1 style="margin-bottom: 20px;margin-top: 10px">￥{{ roomType.price }}</h1>
                <el-button type="primary" @click="openDialog(roomType.id)">预订</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    酒店介绍-->
    <div style="margin-top: 30px">
      <h1>酒店介绍</h1>
      <div style="margin-top: 30px">
        <div class="base-info">
          <h3 class="hh2">基础信息</h3>
          <p class="pp">装修日期: 2015年04月 客房数量: 164 酒店类型: 舒适</p>
        </div>
        <div class="contact-info">
          <h3 class="hh2">联系电话</h3>
          <p class="pp">+86-10-65252229转0;+86-13810160618</p>
        </div>
        <div class="hotel-description">
          <h3 class="hh2">酒店描述</h3>
          <p class="pp">全季酒店(北京朝阳门店)隶属于华住集团。酒店位于北京东城区朝阳门内大街130号，交通便利，距离二号线和六号线地铁朝阳门站H口走路五分钟，酒店周边还设有多个公交站，包括朝内小街、朝阳门内、东四六条等，这些公交线路覆盖了北京市内的主要区域，为住客提供了更多的出行选择。周边餐饮丰富多样，包括东四民芳餐厅、徽商故里等多家知名餐厅。酒店靠近悠唐购物中心、金宝汇购物中心、银河SOHO等大型购物中心，以及故宫博物院、天安门、王府井等著名景点，满足客人的购物和娱乐需求。酒店提供包括早餐、行李寄存、洗衣服务、叫醒服务等在内的多种设施和服务。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, computed, provide, onMounted,readonly} from 'vue';
import {ElDrawer, ElMessage, ElMessageBox} from 'element-plus';
import Zhengce from '../../../zgr/chouti/zhengce.vue';
import Sheshi from '../../../../components/zgr/chouti/sheshi.vue';
import Dianping from '../../../../components/zgr/chouti/dianping.vue';
import type { TabsPaneContext } from 'element-plus';
import { ElButton } from 'element-plus';
import {addCollect, getPubDetailByPubId, getPubScore, getRoomListByPubId} from '../../../../api/shouyePub.js'
import { insertHistory } from '@/api/yy/AttractionsHome.js';
import {useRoute} from "vue-router"; //引入路由
import router from "../../../../router/index.js";
import {
  Star,
  StarFilled
} from '@element-plus/icons-vue'

//接受参数
const route = useRoute();
console.log(route)
const id = ref(route.query.id) //酒店id



//酒店平均分
const setpubScore = ref(null);

//查询每个酒店的平均评分
const pubScore = async ()=>{
  const res = await getPubScore(id.value);
  setpubScore.value = res.data.data
}

provide('id',id.value) // 传递给子组件
provide('pubScore', readonly(setpubScore));

// 模拟房型数据数组
const roomTypes = ref([

]);

//获取时间
const checkIn = ref(route.query.checkIn)
const checkOut = ref(route.query.checkOut)

//给房间列表赋值
const roomType = async (id)=>{
  const res = await getRoomListByPubId(id)
  roomTypes.value = res.data.data[0].pubinformationList
}

//点击预定
const openDialog = async (roomId) => {
  if (value1.value[0] == '' || value1.value == null) {
    //报错弹窗
    ElMessage({
      message:'请选择日期',
      type: 'error',
      plain: true,
    })
  }else {
    //路由跳转
    await router.push(`/pubres?roomId=${roomId}&checkIn=${value1.value[0]}&checkOut=${value1.value[1]}`)
    //强制刷新
    location.reload()
  }
}

// 定义未定义的变量
const value1 = ref([
    checkIn.value,
    checkOut.value,
]);
const size = ref('default');


const activeName = ref('first');

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const formLabelWidth = '80px';
let timer;

const table = ref(false);
const dialog = ref(false);
const loading = ref(false);

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
});

// 计算住宿天数
const nights = computed(() => {
  const start = new Date(value1.value[0])
  const end = new Date(value1.value[1])
  const diffTime = end - start
  return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) || 0
})

//点击按钮打开抽屉
const onClick = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    dialog.value = false;
  }, 400);
};

//酒店信息
const PubDetail = ref({})

//酒店图片墙
const imgList = ref([])

//根据酒店id获取酒店详情信息
const getPubDetail = async (id) => {
  const res= await getPubDetailByPubId(id)
  PubDetail.value = res.data.data
  console.log(PubDetail.value)
  //根据逗号分隔符将pubDescription字段拆分为数组
  imgList.value = PubDetail.value.roomPath.split(',')
}

//浏览记录对象
const data = ref({
  good:id.value,
  classification:1,
})

//给浏览记录对象赋值
const getGood = async ()=>{
  const res = await insertHistory(data.value)
}

//点击收藏
const addect = async (pubId) => {
  const res = await addCollect(pubId)
  console.log(res)
  if (res.data.code == 200) {
    ElMessage({
      message: '收藏成功',
      type: 'success',
    })
    getPubDetail(pubId)
  } else {
    ElMessage({
      message: '收藏失败',
      type: 'error',
    })
  }
}

onMounted(async ()=>{
  await pubScore()
  provide('pubScore',setpubScore.value) // 传递给子组件
})

getGood()

getPubDetail(id.value)

roomType(id.value)


const handleClose = (done: () => void) => {
  if (loading.value) {
    return;
  }
  ElMessageBox.confirm('确定关闭吗?')
      .then(() => {
        loading.value = true;
        timer = setTimeout(() => {
          done();
          // 动画关闭需要一定的时间
          setTimeout(() => {
            loading.value = false;
          }, 400);
        }, 2000);
      })
      .catch(() => {
        // catch error
      });
};

const cancelForm = () => {
  loading.value = false;
  dialog.value = false;
  clearTimeout(timer);
};
</script>

<style scoped>
/*删除了抽屉顶部的多余边距*/
:deep(.el-drawer__head
er){
  margin-bottom: 0px;
}
.jdss span{
  display: inline-block;margin-left: 40px;
}
/*抽屉tabs*/
:deep(.el-tabs__item.is-active) {
  background-color: white; /* 设置背景色为橙色 */
  color: black; /* 设置文字颜色为白色 */
}

/* 修改选中标签下方的边框颜色 */
:deep(.el-tabs__active-bar) {
  background-color: #ff9900; /* 边框颜色与背景色一致 */
}


/*最后*/
/* 标题样式 */
.hh2 {
  margin-bottom: 5px;
}

/* 信息段落样式 */
.pp {
  margin: 0;
}

/* 基础信息部分 */
.base-info {
  margin-bottom: 15px;
}

/* 联系电话部分 */
.contact-info {
  margin-bottom: 15px;
}

/* 联系电话的号码样式 */
.contact-info p {
  color: green;
}

/* 酒店描述部分 */
.hotel-description {
  margin-bottom: 15px;
}
</style>